<!DOCTYPE html>
<html lang="en" mv-expressions="{ }">
<head>
	<meta charset="UTF-8">
	<title>Disposition of Comments</title>
	<link rel="stylesheet" href="https://dev.mavo.io/dist/mavo.css">
	<link rel="stylesheet" href="issues.css">
	<script src="https://dev.mavo.io/dist/mavo.js"></script>
	<!-- <script src="../../mavo/dist/mavo.js"></script> -->
</head>
<body>

<div mv-app id="issues"
     mv-storage="https://github.com/w3c/csswg-drafts/{url('spec')}/issues-{url('doc')}.yaml"
	 mv-github-commit-prefix="[{url('spec')}] " mv-if="url('spec')">
	<header>
		<div class="mv-bar mv-ui mv-fixed"></div>
		<h1>
			<a href="{url('spec')}" mv-attribute="null" property="title"></a>
		</h1>
		<h2>
			<span class="doc">Disposition of Comments ({replace(uppercase(url('doc')), '-', ' ')})</span>
			<span class="count">{count(issue)} issues</span>
		</h2>
	</header>

	<div class="filters">
		<fieldset class="filter">
			<legend>Filter by openness</legend>
			<label property="openFilter" class="issue-open" mv-storage="none">
				<input type="checkbox" property="show" checked>
				Show <span property="id">open</span> issues
				({count(issue.openness = "open")})
			</label>
			<label property="openFilter" class="issue-closed" mv-storage="none">
				<input type="checkbox" property="show" checked>
				Show <span property="id">closed</span> issues
				({count(issue.openness = "closed")})
			</label>
		</fieldset>

		<fieldset class="filter">
			<legend>Filter by status</legend>
			<label property="statusFilter" mv-multiple mv-value="[New, Accepted, Deferred, Retracted, 'Out Of Scope', Invalid, Rejected, Objection]" class="status-{id}">
				<input type="checkbox" property="show" checked>
				<span property="name"></span>
				<meta property="id" content="{idify(name)}" />

				({count(issue.status = id)})
			</label>
		</fieldset>

		<fieldset class="filter">
			<legend>Filter by tag</legend>

			<label property="tagFilter" mv-multiple mv-value="unique(issue.tag)">
				<input type="checkbox" property="show">
				<span property="tagFilter"></span>
				({count(issue.tag = tagFilter)})
			</label>
			<meta property="selectedTags" content="{filter(tagFilter, tagFilter.show).tagFilter}" />
		</fieldset>
	</div>

	<article property="issue" mv-multiple class="status-{status} issue-{openness} {if(and(shown), '', 'filtered')}" id="issue-{id}">
		<meta property="shown" content="{condense(filter(openFilter, openFilter.id = openness).show)}" />
		<meta property="shown" content="{!status or condense(filter(statusFilter, statusFilter.id = status).show)}" />
		<meta property="shown" content="{!count(selectedTags) or intersects(tag, selectedTags)}" />

		<h1>
			<a href="#issue-{id}" property="id" mv-attribute="null" mv-default="{$previous.id + 1}">1</a>
			<span property="summary">Summary of Issue</span>
			<span property="openness" mv-edit="#openness">Open</span>
			<span property="status" mv-edit="#statuses" mv-default="new">New</span>
			<div class="mv-item-bar mv-ui"></div>
		</h1>
		<dl>
			<dt>From</dt>
			<dd>
				<span property="from"></span>
			</dd>

			<dt>Comment(s):</dt>
			<dd property="comment" mv-multiple>
				<a href="{comment}" property="comment" mv-attribute="none"></a>
				<a href="https://www.w3.org/Mail/flatten/index?subject={comment}&amp;list=www-style" class="thread" mv-if="starts(comment, 'https://lists.w3.org')">thread</a>
			</dd>

			<dt data-show-read="{count(response)}">WG Response(s):</dt>
			<dd property="response" mv-multiple>
				<a href="{response}" property="response" mv-attribute="none"></a>
			</dd>

			<dt data-show-read="{!!authorResponse}">{if(from, from, 'Author')}’s response:</dt>
			<dd>
				<a href="{authorResponse}" property="authorResponse" mv-attribute="none"></a>
			</dd>
		</dl>
		<dl data-show-read="{!!resolved}">
			<dt>Resolved</dt>
			<dd>
				<span property="resolved" mv-edit="#resolution" mv-default=""></span>
				<a href="{resolution}" property="resolution" mv-attribute="none" mv-if="resolved = 'resolution'"></a>
			</dd>
		</dl>
		<dl>
			<dt data-show-read="{!!notes}">Notes:</dt>
			<dd>
				<div property="notes" class="markdown"></div>
			</dd>
		</dl>
		<div>
			<span property="tag" mv-multiple>Tag</span>
		</div>
	</article>

	<div hidden>
		<select id="statuses">
			<option property="statusOption" mv-multiple mv-group mv-value="statusFilter" value="{id}">{name}</option>
		</select>

		<select id="resolution">
			<option value="">Unresolved</option>
			<option value="nochange">No change</option>
			<option value="editorial">Editorial</option>
			<option value="bugfix">Bugfix</option>
			<option value="resolution">WG Resolution</option>
		</select>

		<select id="openness">
			<option value="open">Open</option>
			<option value="closed">Closed</option>
		</select>
	</div>
</div>
<div mv-app mv-if="!url('spec')">
	<header>
		<div class="mv-bar mv-ui mv-fixed"></div>
		<h1>
			CSS WG Disposition of Comments
		</h1>

		<form>
			<label>Spec shortname: <input name="spec" value="css-images" /></label>
			<label>Disposition of Comments id: <input name="doc" value="cr-2012"></label>
			<button>Go</button>
		</form>
	</header>
</div>

<script src="https://plugins.mavo.io/yaml/mavo-yaml.js"></script>
<script src="https://plugins.mavo.io/markdown/mavo-markdown.js"></script>

</body>
</html>
